import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Icon } from 'antd'
import { createContainer } from 'utils/hoc'
// import ContentBox from 'components/contentBox'
import PropTypes from 'prop-types'
// import Filters from 'components/common/filters'
// import CustomTable from 'components/common/table'
import Style from './rules.css'

class rules extends Component {
  static propTypes = {
    integrationRule: PropTypes.func,
    rules: PropTypes.any
  }
  constructor (props) {
    super(props)
    this.state = {}
  }

  componentDidMount () {
    this.props.integrationRule()
  }

  render () {
    const { rules } = this.props
    return (
      <>
        <div className={Style['content-box']}>
          <div className={Style['wrap']} >
            <div className={Style['wrap-item']}>
              <div className={Style['side']}>
                <div className={Style['title']}>
                  <Icon type='tag' />
                  <span>基本设置</span>
                </div>
              </div>
              <div className={Style['content']}>
                <div className={Style['content-wrap']}>
                  {rules && rules.map(n => n.type !== 1 && <p key={n.type}>{n.typeName}每{n.amountMoney}元, <span style={{ marginLeft: 16 }}>额外奖励{n.value}分</span></p>)}
                </div>
              </div>
            </div>
            <div className={Style['wrap-item']}>
              <div className={Style['side']}>
                <div className={Style['title']}>
                  <Icon type='tag' />
                  <span>积分消费设置</span>
                </div>
              </div>
              <div className={Style['content']}>
                <div className={Style['content-wrap']}>
                  {rules && rules.map(n => n.type === 1 && <p key={n.type}>{n.typeName}每{n.amountMoney}元, <span style={{ marginLeft: 16 }}>积分消费{n.value}分</span></p>)}
                </div>
              </div>
            </div>
          </div>
        </div>
      </>
    )
  }
}

const mapState = state => ({
  rules: state.users.rules
})
const mapDispatch = dispatch => ({
  login: dispatch.common.createLogin,
  integrationRule: dispatch.users.integrationRule
})

export default createContainer(
  connect(
    mapState,
    mapDispatch
  )(rules)
)
